<template>
    <div>
        <el-dialog
            width="31%"
            :title="dialogIconParams.title"
            :visible.sync="dialogIconParams.dialogShow"
            append-to-body>
            <component :is="dialogIconParams.componentName" @handleSetIcon="handleSetIcon"></component>
        </el-dialog>
        <el-form ref="form" :model="curData" label-width="100px" :inline="true" :rules="rules" status-icon>
            <el-form-item label="父类:" prop="parentId" size="small">
                <el-select-tree
                    clearable
                    default-expand-all
                    checkStrictly
                    placeholder="请选择父类"
                    :popover-min-width="200"
                    :data="menus"
                    v-model="curData.parentId"
                ></el-select-tree>
            </el-form-item>
            <el-form-item label="编码:" prop="code">
                <el-input v-model.trim="curData.code" placeholder="请输入编码" size="small"></el-input>
            </el-form-item>
            <el-form-item label="名称:" prop="name">
                <el-input v-model.trim="curData.name" placeholder="请输入名称" size="small"></el-input>
            </el-form-item>
            <el-form-item label="菜单路径:" prop="path">
                <el-input v-model.trim="curData.path" placeholder="请输入菜单路径" size="small"></el-input>
            </el-form-item>
            <el-form-item label="菜单样式:" prop="icon" size="small">
                <span v-if="this.curData.icon">
                    <i :class="this.curData.icon" style="font-size:18px;cursor: pointer;margin-right:30px;" @click="handleCustomIconAdd"></i>
                    <i class="el-icon-circle-close" style="cursor: pointer;" @click="handleDeleteIcon"></i>
                </span>
                <span v-else @click="handleCustomIconAdd">
                    <el-link type="primary">选择菜单样式</el-link>
                </span>
            </el-form-item>
            <el-form-item label="排序:" prop="sort" size="small">
                <el-input v-model.number.trim="curData.sort" placeholder="请输入排序" size="small"></el-input>
            </el-form-item>

            <el-form-item class="formBtn">
                <el-button type="info" @click="handleCancel" size="medium">取消</el-button>
                <el-button type="primary" @click="handleSubmit" size="medium">确定</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import DialogView from '@/components/dialogView'
    import edtiMixin from '@/mixins/edit.mixin'
    import rules from './rules';
    import {mapState, mapActions} from 'vuex'
    export default {
        mixins: [edtiMixin],
        data() {
            return {
                rules: rules(this),
                addApi: this.$api.system.menu.add,
                editApi: this.$api.system.menu.edit,
                dialogIconParams: {
                    dialogShow: false,
                    componentName: 'Icon',
                    title: '图标'
                }
            }
        },
        computed: {
            ...mapState('basic', ['menus'])
        },
        components: {
            Icon: () => import('./icon')
        },
        methods: {
            ...mapActions('basic', ['doMenusOfBasic']),
            handleCustomIconAdd() {
                this.dialogIconParams.dialogShow = true;
            },
            handleSetIcon(item) {
                let json =  JSON.parse(JSON.stringify(this.curData));
                json.icon = item;
                this.curData = json;
                this.dialogIconParams.dialogShow = false;
            },
            handleDeleteIcon() {
                this.curData.icon = '';
            }
        },
        mounted() {
            this.doMenusOfBasic();
        }
    }
</script>

<style scoped lang="less">
    @import "../../../assets/css/common.less";

    /deep/ .el-select-tree {
        width:200px!important;
    }

</style>
